<template>
  <div class="tab-control fd-x t-center">
    <div v-for="(item, index) in titles" :key="index" class="tab-control-item" :class="{active: index === currentIndex}" @click="tabClick(index)">
      <span>{{item}}</span>
    </div>
    
      
   </div>
</template>
<script>
export default {
  name: 'TabControl',
  props: {
    titles: {
      type :Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return{
      currentIndex: 0
    }
  },
  methods:{
    tabClick(index) {
      this.currentIndex = index;
      this.$emit('tabClick',index)
    }
  }
}
</script>
<style scoped>
  .tab-control {
    font-size: 15px;

    /* 以下是粘性布局，下拉时依旧会出现，top44是因为navbar高度44 */
    position: sticky;
    top: 44px;
    z-index: 10;
  }
  .tab-control-item {
    flex: 1;
    height: 40px;
    line-height: 40px;
    /* border-bottom: 2px solid#ff8198 ; */
  }

  .active span{
    color: var(--color-tint);
    border-bottom: 3px solid var(--color-tint);
    padding:5px;
  }
</style>